import _ from 'lodash'

import { useEffect } from 'react'


export default function useScreenAdapt(dWidth=2048,dHeight=1080){
    // 节流
    const throttle = _.throttle(()=>{
        AdjustZoom()
    },1000)
    
    useEffect(()=>{
          AdjustZoom()
        window.addEventListener('resize',throttle)
        return ()=>{
            window.removeEventListener('resize',throttle)
        }
    },[])

    function AdjustZoom (){ 
        //设计稿宽高
        const designWdith = dWidth 
        const designHeight = dHeight 

        //设计稿宽高比
        const designRatio = designWdith/designHeight 
        //设备宽高
        const deviceWidth = document.documentElement.clientWidth
        const deviceHeight = document.documentElement.clientHeight 
         //设备宽高比
        const deviceRatio = deviceWidth/deviceHeight 
        // 原始缩放比例
        let scaleRatio =1 
        //根据设备宽高比和设计稿宽高比判断缩放比例
        if(deviceRatio <= designRatio){
            scaleRatio = deviceWidth/designWdith 
    
        }else if(deviceRatio > designRatio) {
              scaleRatio = deviceHeight/designHeight
        }
       // 根据缩放比例设置body的缩放和位移
       document.body.style.transform =`scale(${scaleRatio}) translate(-50%,0)`
    }
}